<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="$router.go(-1)"></i>
      <p>商家注册</p>
    </header>
    <ul class="form-box">
      <li>
        <div class="title">商家账号：</div>
        <div class="content">
          <input
            type="text"
            v-model="business.businessId"
            placeholder="请输入商家账号（数字）"
            @blur="checkBusinessId"
          />
        </div>
      </li>
      <li>
        <div class="title">密码：</div>
        <div class="content">
          <input type="password" v-model="business.password" placeholder="请设置密码" />
        </div>
      </li>
      <li>
        <div class="title">确认密码：</div>
        <div class="content">
          <input
            type="password"
            v-model="confirmPassword"
            placeholder="请再次输入密码"
          />
        </div>
      </li>
      <li>
        <div class="title">商家名称：</div>
        <div class="content">
          <input type="text" v-model="business.businessName" placeholder="请输入商家名称" />
        </div>
      </li>
      <li>
        <div class="title">商家地址：</div>
        <div class="content">
          <input type="text" v-model="business.businessAddress" placeholder="请输入商家详细地址" />
        </div>
      </li>
      <li>
        <div class="title">商家介绍：</div>
        <div class="content">
          <input type="text" v-model="business.businessExplain" placeholder="请输入商家介绍" />
        </div>
      </li>
      <li>
        <div class="title">起送费：</div>
        <div class="content">
          <input
            type="number"
            v-model="business.starPrice"
            placeholder="请输入起送费金额"
            min="0"
            step="0.01"
          />
        </div>
      </li>
      <li>
        <div class="title">配送费：</div>
        <div class="content">
          <input
            type="number"
            v-model="business.deliveryPrice"
            placeholder="请输入配送费金额"
            min="0"
            step="0.01"
          />
        </div>
      </li>
    </ul>

    <div class="button-login">
      <button @click="register">注册</button>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from "../components/Footer.vue";
import qs from "qs";
import { useRouter } from "vue-router";
import { ref, inject } from "vue";

const axios = inject("axios");
const router = useRouter();

const business = ref({
  businessId: "",
  password: "",
  businessName: "",
  businessAddress: "",
  businessExplain: "",
  starPrice: "",
  deliveryPrice: ""
});

const confirmPassword = ref("");

// 检查商家ID是否已存在
const checkBusinessId = async () => {
  if (!business.value.businessId) return;
  
  // 验证商家ID格式（必须为数字）
  if (!/^\d+$/.test(business.value.businessId)) {
    alert("商家账号必须为数字！");
    business.value.businessId = "";
    return;
  }

  try {
    const response = await axios.get(
      `/api/BusinessController/getBusinessById?businessId=${business.value.businessId}`
    );
    
    // 如果返回的商家对象不为空，说明商家ID已存在
    if (response && Object.keys(response).length > 0) {
      alert("该商家账号已被注册！");
      business.value.businessId = "";
    }
  } catch (error) {
    console.error("检查商家ID出错:", error);
  }
};

const register = () => {
  // 表单验证
  if (business.value.businessId == "") {
    alert("商家账号不能为空！");
    return;
  }
  
  if (!/^\d+$/.test(business.value.businessId)) {
    alert("商家账号必须为数字！");
    return;
  }
  
  if (business.value.password == "") {
    alert("密码不能为空！");
    return;
  }
  
  if (business.value.password != confirmPassword.value) {
    alert("两次输入的密码不一致！");
    return;
  }
  
  if (business.value.businessName == "") {
    alert("商家名称不能为空！");
    return;
  }
  
  if (business.value.businessAddress == "") {
    alert("商家地址不能为空！");
    return;
  }
  
  if (business.value.businessExplain == "") {
    alert("商家介绍不能为空！");
    return;
  }
  
  if (business.value.starPrice == "" || parseFloat(business.value.starPrice) <= 0) {
    alert("起送费必须大于0！");
    return;
  }
  
  if (business.value.deliveryPrice == "" || parseFloat(business.value.deliveryPrice) <= 0) {
    alert("配送费必须大于0！");
    return;
  }

  // 提交注册
  axios
    .post("/BusinessRegisterServlet", qs.stringify(business.value))
    .then((response) => {
      console.log("商家注册响应:", response);
      
      if (response && response.success) {
        alert("注册成功！请返回登录页面进行登录。");
        router.go(-1);
      } else {
        alert(response.message || "注册失败！");
      }
    })
    .catch((error) => {
      console.error("注册请求出错:", error);
      alert("注册失败，请检查网络连接");
    });
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper header .fa-angle-left {
  font-size: 6vw;
  position: absolute;
  left: 4vw;
  cursor: pointer;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
  background-color: #fff;
  padding-bottom: 4vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.wrapper .form-box li:last-child {
  border-bottom: none;
}

.wrapper .form-box li .title {
  flex: 0 0 20vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
  padding: 2vw 0;
}

.wrapper .form-box li .content input:focus {
  color: #0097ff;
}

.wrapper .button-login {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  background-color: #fff;
}

.wrapper .button-login button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background-color: #38ca73;
  border-radius: 4px;

  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.wrapper .button-login button:hover {
  background-color: #2fa85f;
}

.wrapper .button-login button:active {
  background-color: #28a558;
}

/****************** 底部菜单部分 ******************/
.wrapper .footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #ddd;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper .footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}

.wrapper .footer li p {
  font-size: 2.8vw;
}

.wrapper .footer li i {
  font-size: 5vw;
}

/* 响应式适配 */
@media (max-width: 480px) {
  .wrapper header {
    height: 50px;
  }
  
  .wrapper .form-box {
    margin-top: 50px;
  }
  
  .wrapper .form-box li {
    padding: 16px 12px 0 12px;
  }
  
  .wrapper .form-box li .title {
    flex: 0 0 80px;
    font-size: 12px;
  }
  
  .wrapper .form-box li .content input {
    height: 16px;
    font-size: 12px;
    padding: 8px 0;
  }
  
  .wrapper .button-login {
    padding: 16px 12px 0 12px;
  }
  
  .wrapper .button-login button {
    height: 40px;
    font-size: 15px;
  }
}
</style> 